<template>
  <view class="px-4 overflow-hidden">
      <view class="flex items-center mt-4">
        <image src="@/static/image/ava.jpg" class="w-12 h-12 border border-solid rounded-full"></image>
        <view class="ml-4">
          <view class="font-bold text-zinc-400">Machel</view>
          <view class="my-1 text-xs text-zinc-400">用户ID：21413314</view>
          <view class="text-xs text-zinc-400">注册时间：2018-04-21 12:24</view>
        </view>
        <view class="ml-auto px-4 h-6 flex items-center text-blue-700 border-blue-700 border border-solid text-xs rounded-3xl" @click="jumpCoupon">优惠券</view>

      </view>

      <view class="px-4 py-4 rounded bg-neutral-100 mt-4">
        <view class="flex justify-between items-center">
          <view class="text-sm text-stone-950">专属充值链接</view>
          <view class="text-xs px-4 bg-white flex items-center rounded-2xl text-blue-700" @click="copy">复制</view>
        </view>

        <view class="text-xs text-blue-700 mt-4">
          https://hjm.loovee.com/view?name=gold_recharge.html&uid=21413314
        </view>
      </view>

      <view class="flex mt-4">
        <view class="flex-1">
          <view class="text-xs text-center">今日充值金额(元)</view>
          <view class="text-blue-500 text-xl text-center">6.60</view>
        </view>
        <view class="flex-1">
          <view class="text-xs text-center">累计充值金额(元)</view>
          <view class="text-blue-500 text-xl text-center">24412.63</view>
        </view>
        <view class="flex-1">
          <view class="text-xs text-center">充值次数</view>
          <view class="text-blue-500 text-xl text-center">244</view>
        </view>
      </view>

  </view>

  <screen-list :screenList="rechargeList" :dropDownMenuList="rechargeMenuList">
    <view class="flex justify-between py-3 border-bottom">
      <view>
        <view class="text-slate-600 text-sm">充值乐币：1.90元</view>
        <view class="text-slate-600 text-sm">0303202408080022540222</view>
      </view>
      <view>
        <view class="text-red-600 text-sm text-red-500 text-right">0.38元</view>
        <view class="text-slate-600 text-sm text-right">2024-08-08</view>
      </view>
    </view>
  </screen-list>
</template>

<script setup lang="ts">
    import ScreenList from '@/components/ScreenList.vue'
    import { uiwu } from '@/api/interface/interface'
    import {reactive} from "vue";
    const copy = () => {
      uiwu.copy('复制内容')
    }

    const rechargeList = reactive([
      { name: '用户充值记录', className: 'flex items-center text-slate-600 text-sm' },
      {
        name: '日期',
        key: 'date',
        className: 'ml-auto flex items-center text-slate-600 text-sm',
        type: 'select'
      },
    ])

    const rechargeMenuList = reactive({
      date: [
        { menuName: '全部', value: 1 },
        { menuName: '今日', value: 2 },
        { menuName: '7日', value: 3 },
        { menuName: '30日', value: 4 },
      ]
    })

    const jumpCoupon = () => {
      uni.navigateTo({ url: '/pages/coupon/index' })
    }
</script>

<style scoped lang="scss">

</style>
